<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/cardList' tag="p">{{$I18n.card}}<span>/</span></router-link>
            <p class="black">{{$I18n.cardInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveCard" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.cardInfo}}</h3>
        <div class="body">
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
          <!-- 卡类型 -->
          <el-form-item :label="$I18n.visaType" required :class="{'no-line': isEdit}">
            <el-select v-model="cardData.visaType" :readonly="isEdit">
              <el-option v-for="item in cardTypeList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item :label="$I18n.visaChannel" required :class="{'no-line': isEdit}">
            <el-select v-model="cardData.visaChannel" :readonly="isEdit">
              <el-option v-for="item in channelList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 卡号 -->
          <el-form-item  :label="$I18n.visaCardNo" required :class="{'no-line': isEdit}">
            <el-input v-model="cardData.visaCardNo" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 到期时间 -->
          <el-form-item  :label="$I18n.endDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM" value-format="yyyy-MM"  v-model="cardData.endDate"   type="month" placeholder="请选择到期月份"></el-date-picker>
          </el-form-item>
          <!-- 余额 -->
          <el-form-item  :label="$I18n.balanceAmount" required :class="{'no-line': isEdit}">
            <el-input v-model="cardData.balanceAmount" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 总金额 -->
          <el-form-item  :label="$I18n.totalAmount" :class="{'no-line': isEdit}">
            <el-input v-model="cardData.totalAmount" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 使金额 -->
          <el-form-item  :label="$I18n.useAmount" :class="{'no-line': isEdit}">
            <el-input v-model="cardData.useAmount" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 使金额 -->
          <el-form-item  :label="$I18n.cvc" :class="{'no-line': isEdit}">
            <el-input v-model="cardData.cvc" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item :label="$I18n.status" required :class="{'no-line': isEdit}">
            <el-select v-model="cardData.cardStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </section>
    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/orderList')" >{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import INTERFACE from './interface'

export default {
  data() {
    return {
      cardId: this.$route.query.cardId,
      cancelDialog: false,
      cardData: {},
      isEdit: false,
      cardTypeList: [
        {codeKey: 'VIRTUAL', codeName: '虚拟卡'},
        {codeKey: 'VISA', codeName: 'VISA'}
      ],
      channelList: [
        {codeKey: 'GLOBAL_PAYMENT', codeName: '全球付'},
        {codeKey: 'REAL_CARD', codeName: '真实卡'}
      ],
      statusList: [
        {codeKey: 'NEW', codeName: '新开'},
        {codeKey: 'USEING', codeName: '使用中'},
        {codeKey: 'DISABLE', codeName: '封禁,未退款'},
        {codeKey: 'REFUND', codeName: '已退款'}
      ]
    }
  },
  created() {
    if (!this.cardId) return
    this.isEdit = true
    INTERFACE.queryCardDetail({cardId: this.cardId}).then(res => {
      this.cardData = res.data
    })
  },
  methods: {
    saveCard() {
      this.cardData.cardId = this.cardId;
      INTERFACE.saveCard(this.cardData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/cardList')
      })
    }
  }
}
</script>